<template>
  <div>
    <div class="liveDataAnalysis">
      <p class="title">流量层级</p>
      <div class="chart">
        <line1
          v-if="flow_chartx.length"
          :x_data="flow_chartx"
          :flow_chartxx="flow_chartxx"
          :y1_data="y_in"
          :y2_data="y_line"
          :y3_data="y_avglooktime"
          name1="进场观众"
          name2="在线观众"
          name3="人均看播时长"
          formatter="1"
          yname="人数"
          yname1="秒"
          grid_line="false"
          line_color="rgba(171,231,255,0.3)"
          font_color="rgba(235,235,235,0.7)"
        />
        <div
          class="zw"
          v-if="(!flow_chartx && !loading) || (!flow_chartx.length && !loading)"
        >
          <img src="../../../assets/three/noData.png" alt />
          <p>暂无数据</p>
        </div>
        <div
          v-loading="loading"
          v-if="!flow_chartx || !flow_chartx.length"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <div class="v_box">
        <p class="title">商品销量趋势</p>
        <p>直播商品总数：{{ livepro }}</p>
      </div>
      <div class="chart">
        <line1
          v-if="x_data05.length"
          :flow_chartxx="x_data055"
          yAxisIndex="1"
          :x_data="x_data05"
          :y1_data="y1_data05"
          :y2_data="y2_data05"
          name2="总量"
          formatter="1"
          yname1="总量"
          size="12"
          grid_line="false"
          line_color="rgba(171,231,255,0.3)"
          font_color="rgba(235,235,235,0.7)"
        />
        <div
          class="zw"
          v-if="(!x_data05 && !loading) || (!x_data05.length && !loading)"
        >
          <img src="../../../assets/three/noData.png" alt />
          <p>暂无数据</p>
        </div>
        <div
          v-loading="loading"
          class="loading"
          v-if="(!x_data05 && loading) || !x_data05.length & loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <p class="title">涨粉/粉丝团趋势</p>
      <div class="chart">
        <line1
          v-if="fanstuan_chartx.length"
          :x_data="fanstuan_chartx"
          :flow_chartxx="fanstuan_chartxx"
          :y1_data="fanstuan_charty"
          :y2_data="fanstuan_charty1"
          name1="本场涨粉人数"
          name2="粉丝团新增"
          formatter="1"
          yAxisIndex="1"
          size="12"
          grid_line="false"
          font_color="rgba(195,202,223,0.5)"
        />
        <div
          class="zw"
          v-if="
            (!fanstuan_chartx && !loading) ||
              (!fanstuan_chartx.length && !loading)
          "
        >
          <img src="../../../assets/three/noData.png" alt />
          <p>暂无数据</p>
        </div>
        <div
          v-loading="loading"
          v-if="!fanstuan_chartx || !fanstuan_chartx.length"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <!-- <p class="onMore" v-if="!loading">
        已经到底了哟，电脑登录dy.zsjx114.com查看更多详细数据~
      </p> -->
    </div>
    <!-- 分割线 -->
    <p class="Splitline"></p>
  </div>
</template>

<script>
import line1 from "./line1.vue";
export default {
  props: ["livepro", "status"],
  data() {
    return {
      loading: false,
      y1_data6: null,
      y2_data7: null,
      y2_data8: null,
      y2_data9: null,
      x_data6: null,
      x_data66: null,
      x_data05: [],
      y1_data05: null,
      y2_data05: null,
      fanstuan_chartx: [],
      fanstuan_charty: null,
      fanstuan_charty1: null,
      flow_chartx: [],
      y_avglooktime: null,
      y_in: null,
      y_line: null,
      vipLevel: null,
      tiemr: null,
      flow_chartxx: null
    };
  },
  components: { line1 },
  computed: {},
  created() {},
  destroyed() {
    this.clearTime();
  },
  mounted() {
    this.get_data02();

    this.tiemr = setInterval(() => {
      this.get_data02();
    }, 120000);
  },
  watch: {},
  methods: {
    clearTime() {
      clearInterval(this.tiemr);
      this.tiemr = null;
    },
    get_data02() {
      if (this.status == 2) {
        clearInterval(this.tiemr);
      }
      this.loading = true;
      this.response02 = null;
      let that = this;

      this.$axios({
        method: "get",
        url: "/api/live/GetLiveAttribute",
        params: {
          // room_id: "6960521564123122463",
          // room_id: '6992070055278267150'
          room_id: that.$route.query.id
        }
      })
        .then(response => {
          this.loading = false;
          if (response.data.code == 1003) {
            this.permissions = 0;
          }
          if (response.data.code == 0) {
            this.response02 = response.data.data;
            if (this.response02.avglooktime == '0+"') {
              this.response02.avglooktime = false;
            }
            if (response.data.data.sound_chart) {
              this.x_data011 = response.data.data.sound_chart.x;
              this.x_data01 = response.data.data.sound_chart.x.map(element => {
                return this.timestamp(element, "h:m");
              });
              this.y1_data01 = response.data.data.sound_chart.y2;
              this.y2_data01 = response.data.data.sound_chart.y1;
            }
            if (response.data.data.line_chart) {
              this.x_data02 = response.data.data.line_chart.x.map(element => {
                return this.timestamp(element, "h:m");
              });
              this.y1_data02 = response.data.data.line_chart.y2;
              this.y2_data02 = response.data.data.line_chart.y1;
            }
            if (response.data.data.sound_people_chart) {
              this.x_data03 = response.data.data.sound_people_chart.x.map(
                element => {
                  return this.timestamp(element, "h:m");
                }
              );
              this.y1_data03 = response.data.data.sound_people_chart.y2;
              this.y2_data03 = response.data.data.sound_people_chart.y1;
            }
            if (response.data.data.fans_chart) {
              this.x_data04 = response.data.data.fans_chart.x.map(element => {
                return this.timestamp(element, "h:m");
              });
              this.y1_data04 = response.data.data.fans_chart.y2;
              this.y2_data04 = response.data.data.fans_chart.y1;
            }
            if (response.data.data.sales_chart) {
              this.x_data055 = response.data.data.sales_chart.x;
              this.x_data05 = response.data.data.sales_chart.x.map(element => {
                return this.timestamp(element, "h:m");
              });
              this.y1_data05 = response.data.data.sales_chart.y2;
              this.y2_data05 = response.data.data.sales_chart.y1;
            }
            if (response.data.data.froms_chart) {
              this.x_data66 = response.data.data.froms_chart.x;
              this.x_data6 = response.data.data.froms_chart.x.map(ele => {
                return this.timestamp(ele, "h:m");
              });
              this.y1_data6 = response.data.data.froms_chart.y_city;
              this.y2_data7 = response.data.data.froms_chart.y_fans;
              this.y2_data8 = response.data.data.froms_chart.y_video;
              this.y2_data9 = response.data.data.froms_chart.y_other;
            }
            if (response.data.data.fanstuan_chart) {
              this.fanstuan_chartxx = response.data.data.fanstuan_chart.x;

              this.fanstuan_chartx = response.data.data.fanstuan_chart.x.map(
                ele => {
                  return this.timestamp(ele, "h:m");
                }
              );
              this.fanstuan_charty = response.data.data.fanstuan_chart.y_fans;
              this.fanstuan_charty1 =
                response.data.data.fanstuan_chart.y_fanstuan;
            }
            if (response.data.data.flow_chart) {
              this.flow_chartxx = response.data.data.flow_chart.x;

              this.flow_chartx = response.data.data.flow_chart.x.map(ele => {
                return this.timestamp(ele, "h:m");
              });
              if (!this.flow_chartx.length) {
                this.flow_chartx = false;
              }
              this.y_avglooktime = response.data.data.flow_chart.y_avglooktime;

              this.y_in = response.data.data.flow_chart.y_in;
              this.y_line = response.data.data.flow_chart.y_line;
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.Splitline {
  width: 100%;
  height: 0.36rem;
  background: #c3cadf;
  opacity: 0.1;
  margin-bottom:.24rem;
}
.liveDataAnalysis {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  padding-top: 0.38rem;
  background: #191f33;
  .title {
    text-align: left;
    position: relative;
    font-size: 0.4rem;
    font-weight: 600;
    color: #ffffff;
    text-indent: 0.266667rem;
    vertical-align: top;
    margin-bottom: 0.533333rem;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-42%);
      vertical-align: middle;
      width: 0.08rem;
      height: 0.373333rem;
      background-color: #fd7f2c;
      border-radius: 0.04rem;
    }
  }
  .chart {
    height: 4.693333rem;
    width: 100%;
    padding-bottom: 0.666667rem;
  }
  .v_box {
    display: flex;
    justify-content: space-between;
    > p {
      &:nth-child(2) {
        align-self: flex-end;
        margin-bottom: 0.533333rem;
        font-size: 0.32rem;
        color: #c3cadf;
      }
    }
  }
  .onMore {
    width: 100%;
    text-align: center;
    font-size: 0.32rem;
    color: #c3cadf;
    opacity: 0.5;
    padding-bottom: 0.666667rem;
  }
  .zw {
    width: 100%;
    margin-top: 0.8rem;
    margin-left: -0.4rem;
    position: absolute;
    height: 3.986667rem;
    text-align: center;
    img {
      width: 3.96rem;
      height: 2.826667rem;
    }
    p {
      font-size: 0.346667rem;
      color: #c3cadf;
      opacity: 0.5;
    }
  }
}
</style>
